<template>
  <div class="">
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.mobile" />
      </el-form-item>

      <el-form-item label="到达地">
        <el-radio-group v-model="form.type">
          <el-radio label="北京" />
          <el-radio label="上海" />
          <el-radio label="成都" />
          <el-radio label="郑州" />
          <el-radio label="无" />
        </el-radio-group>
      </el-form-item>

      <el-form-item class="avatar" label="头像">
        <el-radio-group v-model="form.img">
          <el-radio v-for="(item, index) in imgSrc" :key="index" :label="item">
            <img :src="item" alt="" />
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 头像 -->
      <el-form-item>
        <el-button type="primary" @click="add">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTableRef"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column property="name" label="头像" width="120">
        <template #default="scope">
          <img style="width: 80px; height: 80px" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120" />

      <el-table-column property="mobile" label="电话" width="120" />
      <el-table-column label="日期" width="120">
        <template #default="scope">{{ filTime(scope.row.date) }}</template>
      </el-table-column>
      <el-table-column property="type" label="风险地" width="120" />
      <el-table-column property="type" label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" @click="del(scope.$index)">删除</el-button>
          <!-- scope.$index 是下标 -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 复制表格展示数据 -->

    <el-button type="primary" @click="clear">选中删除</el-button>
    <div>北京{{ num.num1 }} -----上海{{ num.num2 }}--- 无:{{ num.num3 }}</div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus"; //引入消息弹出框的方法

export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      form: {
        name: "",
        mobile: "",
        type: "",
        img: "",
      },
      imgSrc: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F17%2F20210717232533_2edcf.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651891522&t=0a08b46ca90d979d56c62de8eaa23923",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp462318665.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651891522&t=9f3c5e0bd07872bc6590dd3576f934d0",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2F13%2Fc2%2Fdb13c284517b8c66f3c4d7f0571c7baf.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651891522&t=1066824e18747ecb719806019207d60f",
      ],
      selectValue: [],
      //保存选中的数组
    });

    const add = () => {
      let res = JSON.parse(JSON.stringify(data.form));
      //最简单的 浅复制变成深复制的方法 如果不加这一步 那么会出现一个变之前的跟着的都变的问题
      res.date = new Date();
      //添加的时候加一个日期
      store.commit("add", res);
      // {name:data.form.name,}
      data.form = { name: "", mobile: "", type: "", img: "" };
      // 添加完成后清空
    };
    //添加
    const list = computed(() => {
      return store.state.list;
    });
    //拿vuex里的数据渲染渲染数据

    const filTime = (val) => {
      return new Date(val).toLocaleString();
    };
    //vue3  中没有过滤器了 所以定义一个方法来过滤时间

    const del = (index) => {
      ElMessageBox.confirm("确认删除吗？", "Warning", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.commit("del", index);
          //弹框出现 又点了确定的时候 调用vuex删除
          ElMessage({
            type: "success",
            message: "删除完成",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    };
    //调用vuex中的删除

    const handleSelectionChange = (val) => {
      console.log(val);
      data.selectValue = val;
    };
    //把选中的数组存下来

    const clear = () => {
      store.commit("clear", data.selectValue);
    };
    //传到vuex中删除s 把选中的数据传过去

    const num = computed(() => {
      let num1 = 0,
        num2 = 0,
        num3 = 0;
      store.state.list.forEach((item) => {
        if (item.type == "北京") {
          num1++;
        } else if (item.type == "上海") {
          num2++;
        } else if (item.type == "无") {
          num3++;
        }
      });
      // num1就是北京来的 num2上海来的 num3低风险来的
      return { num1, num2, num3 };
    });
    //计算各地区的数量
    return {
      ...toRefs(data),
      add,
      list,
      filTime,
      del,
      handleSelectionChange,
      clear,
      num,
    };
  },
};
</script>

<style lang="scss">
.avatar img {
  width: 80px;
  height: 80px;
}
</style>
